<template>
  <div class="app-container">
    <!-- 头部搜索板块 -->
    <div class="header">
      <div class="search_block">
        <el-input style="width: auto" placeholder="请输入表名"></el-input>
        <el-button type="primary" round>🔍搜索</el-button>
        <el-select class="" value="" placeholder="根据编辑人查询" ></el-select>
        <el-date-picker placeholder="根据创建日期查询"></el-date-picker>
      </div>
      <div class="condition_button_group">
        <el-button style="margin-right: 25px">查看全部状态</el-button>
        <el-button-group>
          <el-button round>编辑中</el-button>
          <el-button type="primary">待审核</el-button>
          <el-button type="success">审核通过</el-button>
          <el-button type="danger">审核驳回</el-button>
          <el-button type="warning">审核逾期</el-button>
          <el-button type="info"round>已弃用</el-button>
        </el-button-group>
      </div>
    </div>

    <div style="width: 100%; border: solid 1px gray; margin: 15px" />

    <!-- 量表表格区域 -->
    <div class="scale_table">
      <el-table border :data="scaleList">
        <el-table-column label="量表标题"
                         prop="title"
                         align="center"></el-table-column>
        <el-table-column label="创建人"
                         prop="creatorId"
                         align="center"></el-table-column>
        <el-table-column label="创建日期"
                         prop="createDate"
                         align="center"></el-table-column>
        <el-table-column label="量表状态"
                         prop="state"
                         align="center"></el-table-column>
        <el-table-column label="相关领域"
                         prop="domain"
                         align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row, $index}">
            <el-button type="primary" size="mini" @click="checkScale(row)">查看详情</el-button>
            <el-button type="danger" size="mini" @click="changeState(row)">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getAllFuScale} from "@/api/fuScale";
import router from "@/router";
export default {
  name: "tp",
  data() {
    return {
      scaleList: [],
    };
  },
  mounted () {
    getAllFuScale().then(res => {
      this.scaleList = res.data;
    })
  },

  methods: {
    // 查看评价量表详情
    checkScale (row) {
      router.push({path: '/goal/goalDetails', query: {row}});
    },

    // 修改当前量表状态
    changeState () {
      console.log(row);
    }
  },
};
</script>

<style scoped>
.app-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
  .header {
    width: 100%;
    height: 80px;
    margin: 10px;
    border-radius: 15px;
    background-color: #66afe9;
    padding: 20px;
    display: inline;
  }
    .search_block {
      float: left;
    }
    .condition_button_group {
      float: right;
    }

  .scale_table {
    width: 100%;
    margin: 10px;
    padding: 20px;
    border-radius: 15px;
    background-color: #5cb85c;
  }
</style>

